<template>
  <div class="container">
    <el-card class="card">
      <el-row type="flex" justify="space-between" class="addQst">
        <span class="state">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="$router.push('/questions/new')"
        >
          新增试题</el-button
        >
      </el-row>
      <el-form
        ref="resetForm"
        :model="requestParameters"
        label-position="right"
        label-width="80px"
      >
        <!-- 第一行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select
                @change="getSecond"
                v-model="requestParameters.subjectID"
              >
                <el-option
                  v-for="item in subjects"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select v-model="requestParameters.catalogID">
                <el-option
                  v-for="item in secSubject"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              /></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select
                v-model="requestParameters.tags"
                @keyup.enter="handleFilter"
              >
                <el-option
                  v-for="item in tagList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input
                v-model="requestParameters.keyword"
                placeholder="根据题干搜索"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <!-- 排查时应该先一个一个排查后再做修改 而不是全部修改一遍！！ -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select v-model="requestParameters.questionType">
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="requestParameters.difficulty">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select v-model="requestParameters.direction">
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select v-model="requestParameters.creatorID">
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option></el-select
            ></el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="requestParameters.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业名称" prop="shortName">
              <el-input v-model="requestParameters.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :span="12">
                <el-form-item label="城市" prop="province">
                  <el-select
                    v-model="requestParameters.province"
                    @change="handleProvince"
                    style="marginRight:-39px"
                  >
                    <el-option
                      v-for="item in citySelect.province"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="city">
                  <el-select
                    style="marginLeft:-39px"
                    v-model="requestParameters.city"
                  >
                    <el-option
                      v-for="item in citySelect.cityDate"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row type="flex" justify="end">
              <el-form-item>
                <el-button size="small" @click="resetForm">清除</el-button>
                <el-button size="small" type="primary" @click="handleFilter"
                  >搜索</el-button
                >
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <!-- 提示行 -->
      <el-row>
        <el-col :span="24">
          <div class="tip">
            <i class="el-icon-info" style="padding:10px"></i>
            <span>一共{{ total }}条提示</span>
          </div>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table v-loading="loading" :data="tableData.items" style="width:100%">
        <el-table-column width="120" prop="number" label="试题编号">
        </el-table-column>
        <el-table-column width="60" prop="subject" label="学科">
        </el-table-column>
        <el-table-column width="80" prop="catalog" label="目录">
        </el-table-column>
        <el-table-column
          width="60"
          prop="questionType"
          label="题型"
          :formatter="formatType"
        >
        </el-table-column>
        <el-table-column width="260" label="题干">
          <!-- prop="question"  -->
          <template slot-scope="{ row }">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column width="180" label="录入时间">
          <!-- prop="addDate"  -->
          <template slot-scope="{ row }">
            <!-- parseTimeByString -->
            <!-- {{ row.addDate | formatDate }} -->
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column
          width="60"
          prop="difficulty"
          label="难度"
          :formatter="formatDfct"
        >
        </el-table-column>
        <el-table-column width="100" prop="creator" label="录入人">
        </el-table-column>
        <el-table-column width="200" label="操作">
          <template slot-scope="{ row }">
            <el-button
              title="预览"
              type="primary"
              plain
              icon="el-icon-view"
              circle
              @click="onView(row)"
            ></el-button>
            <el-button
              title="修改"
              type="success"
              plain
              icon="el-icon-edit"
              circle
              @click="onEdit(row.id)"
            ></el-button>
            <el-button
              title="删除"
              type="danger"
              plain
              icon="el-icon-delete"
              circle
              @click="onDel(row)"
            ></el-button>
            <el-button
              title="加入精选"
              type="warning"
              plain
              icon="el-icon-check"
              circle
              @click="onAdd(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="margin-top:30px" type="flex" justify="end">
        <el-pagination
          background
          layout="prev, pager, next,sizes, jumper"
          :page-sizes="[5, 10, 20, 50]"
          :total="total"
          :current-page="requestParameters.page"
          :page-size="requestParameters.pagesize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <questions-preview ref="qstPreview" />
  </div>
</template>

<script>
import { simple } from "@/api/hmmm/subjects";
import { simple as tagsSimple } from "@/api/hmmm/tags";
import { simple as directorySimple } from "@/api/hmmm/directorys";
import { simple as userSimple } from "@/api/base/users";
import { questionType, difficulty, direction } from "@/api/hmmm/constants";
import { provinces, citys } from "@/api/hmmm/citys.js";
import { list, remove, choiceAdd } from "@/api/hmmm/questions.js";
import QuestionsPreview from "../components/questions-preview.vue";
export default {
  name: "Questions",
  components: {
    QuestionsPreview
  },
  data() {
    return {
      loading: false,
      questionType,
      difficulty,
      direction,
      subjects: [],
      secSubject: [],
      tagList: [],
      userList: [], //录入人列表
      tableData: {}, //数据列表
      citySelect: {
        province: [],
        cityDate: []
      }, //城市
      requestParameters: {
        page: 1,
        pagesize: 10
      }, //请求试题数据传参
      total: 0
    };
  },
  created() {
    this.getSubjects();
    this.userSimple();
    this.getCityData();
    this.getList();
  },
  // filters: {
  //   // 格式化时间
  //   formatDate(time) {
  //     var date = new Date(time);

  //     var year = date.getFullYear(),
  //       month = date.getMonth() + 1, //月份是从0开始的
  //       day = date.getDate(),
  //       hour = date.getHours(),
  //       min = date.getMinutes(),
  //       sec = date.getSeconds();
  //     var newTime =
  //       year +
  //       "-" +
  //       (month < 10 ? "0" + month : month) +
  //       "-" +
  //       (day < 10 ? "0" + day : day) +
  //       " " +
  //       (hour < 10 ? "0" + hour : hour) +
  //       ":" +
  //       (min < 10 ? "0" + min : min) +
  //       ":" +
  //       (sec < 10 ? "0" + sec : sec);

  //     return newTime;
  //   }
  // },
  methods: {
    // 获取学科
    async getSubjects() {
      const { data } = await simple();
      this.subjects = data;
    },
    // 获取录入人
    async userSimple() {
      const { data } = await userSimple();
      this.userList = data;
    },
    // 获取省
    async getCityData() {
      this.citySelect.province = await provinces();
    },
    // 获取二级目录
    async getSecond() {
      const { data } = await directorySimple({
        subjectID: this.currentSubject
      });
      this.secSubject = data;
      const { data: data1 } = await tagsSimple({
        subjectID: this.currentSubject
      });
      this.tagList = data1;
    },
    // 选省获取到市
    async handleProvince(e) {
      this.citySelect.cityDate = await citys(e);
      this.requestParameters.city = this.citySelect.cityDate[0];
    },
    // 重置
    resetForm() {
      this.$refs.resetForm.resetFields();
    },
    // 搜索信息
    handleFilter() {
      this.requestParameters.page = 1;
      this.getList(this.requestParameters);
    },
    // 获取试题列表
    async getList() {
      this.loading = true;
      const { data } = await list(this.requestParameters);
      this.tableData = data;
      this.total = data.counts;
      this.loading = false;
    },
    // 格式化题型
    formatType(row, column, cellValue, index) {
      const re = this.questionType.find(item => item.value == cellValue);
      return re.label;
    },
    // 格式化难度
    formatDfct(row, column, cellValue, index) {
      const re = this.difficulty.find(item => item.value == cellValue);
      return re.label;
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pagesize = val;
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters);
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val;
      this.getList(this.requestParameters);
    },
    onView(row) {
      console.log(row);
      this.$refs.qstPreview.showDialog(row);
    },
    onEdit(id) {
      this.$router.push({
        path: "/questions/new",
        query: {
          id
        }
      });
    },
    async onDel(row) {
      await this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        type: "warning"
      });
      await remove(row);
      this.$message.success("删除成功");
      this.getList();
    },
    async onAdd(row) {
      await this.$confirm("此操作将该题目加入精选, 是否继续?", "提示", {
        type: "info"
      });
      await choiceAdd({ ...row, choiceState: 1 });
      this.$message.success("添加成功");
      this.getList();
    }
  }
};
</script>

<style scoped lang="scss">
.card {
  margin: 10px;
}
.state {
  font-size: 12px;
  color: pink;
}
.addQst {
  margin-bottom: 15px;
}
.tip {
  height: 40px;
  margin-bottom: 15px;
  padding-left: 10px;
  line-height: 40px;
  color: #909399;
  background-color: #f4f4f5;
  border-radius: 6px;
  span {
    font-size: 13px;
  }
}
</style>
